<!--通用头部-->
<template>
  <div class="header">
    <!-- <div class="header-user">您好，{{userInfo.name}}</div> -->
    <el-dropdown trigger="click" style="margin-right:30px;cursor:pointer;">
      <span class="el-dropdown-link">
        您好，{{userInfo.name}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="dialogVisible=true">修改密码</el-dropdown-item>
        <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
        <!-- <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>-->
      </el-dropdown-menu>
    </el-dropdown>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" true="30%">
      <div class="authentication-user-item" style="margin-left:180px;">
        <el-form ref="form" label-width="100px">
          <div>
            <el-form-item label="原密码">
              <el-input
                v-model="changeForm.oldPassword"
                style="width:45%;"
                show-password
                placeholder="请输入原密码"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="新密码" style="margin-top:40px;">
              <el-input
                v-model="changeForm.password"
                style="width:45%;"
                show-password
                placeholder="请输入新密码"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="确认密码" style="margin-top:40px;">
              <el-input v-model="password" show-password style="width:45%;" placeholder="请确认新密码"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="authentication-user-bt">
          <el-button type="primary" @click="changePassword">确认修改</el-button>
          <el-button style="padding: 12px 40px; margin: 0 60px;" @click="dialogVisible=false">返回</el-button>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible =truee">取 消</el-button>
          <el-button type="primary" @click="dialogVisible =truee">确 定</el-button>
      </span>-->
    </el-dialog>
    <!-- <div class="header-modify">
      <button class="header-modify-bt" @click="loginOut">退出</button>
    </div>-->
  </div>
</template>；

<script>
import * as userAPI from "@/api/user"
export default {
  name: "Header",
  data() {
    return {
      userInfo: {},
      changeForm: {},
      password: "",
      dialogVisible: false
    };
  },
  created() {
    if (localStorage.userInfo) {
      
      this.userInfo = JSON.parse(localStorage.userInfo);
    }
  },
  methods: {
    getCommand(command) {
      alert(command);
    },
    // 退出
    loginOut() {
      this.$router.push({
        path: "/Login"
      });
      // window.sessionStorage.clear();
      this.$cookies.remove('signature');
    },
    // 修改密码
    changePassword() {
      if (!this.changeForm.oldPassword) {
        this.$message.warning("请输入原密码");
        return;
      }
      if (!this.changeForm.password) {
        this.$message.warning("请输入新密码");
        return;
      }
      if (!this.password) {
        this.$message.warning("请确认新密码");
        return;
      }
      if (this.changeForm.password != this.password) {
        this.$message.warning("两次输入不一致");
        return;
      }
      this.changeForm.username = this.userInfo.userName;
      userAPI
        .changePassword(this.changeForm)
        .then(response => {
          this.$message.success(response.message);
          if (response.code == 200) {
            this.dialogVisible = false;
          }
        })
        .catch(err => {
          console.log("修改密码===>", err);
        });
    }
  }
};
</script>

<style scoped>
.header {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  background: #ffffff;
  height: 62px;
  line-height: 64px;
  border-bottom: 1px #e8ecef solid;
}
.header-modify-bt {
  width: 90px;
  height: 30px;
  background: #f2f4f6;
  border-radius: 4px;
  font-size: 12px;
  /* color: #778ca2; */
  margin-right: 20px;
}
.header-user {
  /* color: #778ca2; */
  font-size: 12px;
  margin-right: 40px;
}
.authentication-user-bt {
  width: 80%;
  margin-top: 50px;
  margin-left: 10%;
}
</style>
